情境

有多個文件或圖檔利用checkbox勾選後，可以直接點選下載按鈕。此時網站會將剛剛所選擇的項目打包成一包zip下載到你的電腦中。

使用套件 - jszip, file-saver

jszip

1. 可以將多個檔案打包成zip檔案
2. 可以透過npm下載 npm install jszip

file-saver.js

1. 可以協助瀏覽器產生檔案在client端
2. 可以透過npm下載 npm install file-saver

想法流程

1. 取得被選取的檔案
2. 若需要資料夾則需建立 zip.folder(資料夾名稱)
3. 根據需求處理檔案 zip.file(需被存入的檔案)
   • Ex. 透過iamge url將圖檔轉換為base64格式
   • Ex. 也許需要寫入文字檔案
4. zip所有檔案後，透過file-saver中saveAs存到本機

程式範例 （以vue.js為例)

UI Demo畫面

選擇需要的圖檔後，按下載，打包圖檔至zip並產出文件告知被選去的圖檔id

code demo 連結

這邊就不一一放code，我們來看看最核心的部分

//選擇圖檔，點擊下載按鈕後
download() {
      const _self = this;
      this.selectedList = []; 
      
      // 取得被選取的列表
      this.selectedList = this.data.filter(item => item.isCheck);
      // create zip 
      const zip = new JSZip();
      // - create folder
      let note = zip.folder("note");
      let selectedIdNum = '';
      _self.selectedList.map(item => selectedIdNum += item.id + ',');
      
      // - 建立文件，並給予動態的content
      let txt = _self.selectedList.length > 0 ? `被選擇的圖檔id:${selectedIdNum}`: '沒有被選擇的圖檔'
      note.file("note.txt", txt);
      
      
      //將選取的圖檔，轉為base64後，加到zip中
      _self.selectedList.forEach((item, index) => {
      //呼叫轉換image to base64 的 function
      _self.getBase64Image(`https://fakeimg.pl/${item.img}`,function(dataUrl) {
          let _url = dataUrl.replace('data:image/png;base64,', '')
          //將轉好base64的內容，加入zip黨
          zip.file(`${item.id}.png`, _url,{base64: true});
          
          if(index === _self.selectedList.length-1){
             //將所有檔案打包
             zip.generateAsync({type:"blob"})
               .then(function(content) {
                  //  儲存這個zip到local端
                  saveAs(content, "example.zip");
               });
           }
        }, 'image/png')//end: getBase64Image
      })

    },

jszip真的是蠻方便好用的插件可以做到將檔案打包zip，可能依照需求還有json或其他類型檔案，不過今天就用簡單的範例，跟大家分享，如果要透過網站做到zip檔案的作法囉